<template>
  <FormItemWrapper :widget="widget" :designer="designer">
    <JDictSelectTag
      v-if="ifShow"
       :placeholder="`${widgetProps.placeholder}${formItemLabelName}`" 
       v-model:value="widgetProps.value" 
       :dictCode="widgetProps.dictCode"
       :allowClear="widgetProps.allowClear"
       :type="widgetProps.dictCompType"
       :style="widgetProps.style"
       :mode="multiple ? 'multiple' : null"
      />
      <JDictSelectTag
        v-else
        :placeholder="`${widgetProps.placeholder}${formItemLabelName}`" 
        v-model:value="widgetProps.value" 
        :dictCode="widgetProps.dictCode"
        :allowClear="widgetProps.allowClear"
        :style="widgetProps.style"
        :type="widgetProps.dictCompType"
        :mode="multiple ? 'multiple' : null"
      />
  </FormItemWrapper>
</template>
<script lang="ts" name="dict-select-widget" setup>
import { ref, computed, watch, provide } from 'vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { Icon } from '/@/components/Icon';
import { useAttrs } from '/@/hooks/core/useAttrs';
import FormItemWrapper from './FormItemWrapper.vue'
import type { Designer } from '../../type'
import { useWidget } from '../useWidget'
import { JDictSelectTag } from '/@/components/Form';
  
const props = defineProps({
  widget: { type: Object, default: {}},
  // componentProps: { type: Object, default: {}},
  designer: { type: Object as () => Designer},
  designerConfig: {
    type: Object,
    default: () => {
      return {
        formTemplates: true,  
      }
    }
  },
})

const widgetProps = props.widget.props
const attrs = useAttrs()
// 强制刷新, 避免出现问题
const ifShow = ref(false)
const formItemLabelName = computed(() => {
  return widgetProps.formItemLabelName ? widgetProps.formItemLabelName : ''
})

watch(
  () => widgetProps.dictCompType,
  () => {
    ifShow.value = !ifShow.value 
  },
  { deep: true, immediate: false }
)

const multiple = computed(() => {
  const multiple = widgetProps.dictCompType === 'list'
  if (multiple) {
    widgetProps.value = undefined
  }
  return multiple
})
provide('designerConfig', props.designerConfig);
const { watchDefaultValue } = useWidget()
watchDefaultValue(props)

</script>

<style lang="less">


</style>
